<template>
    <div class="SelectSecurityType">
        <ul class="f-cb SelectSecurityList">
            <li>{{$t('m.uploadInformation')}}</li>
            <li>{{$t('m.StartTrading')}}</li>
            <li>{{$t('m.WaitingForApproval')}}</li>
        </ul>
        <div class="SelectSecurityborder f-cb">
            <h2>{{$t('m.SelectCertificateType')}}</h2>
            <ul class="SelectSecurityUl f-cb">
                <li 
                    v-for="(item,index) in region"
                    :key="index"
                    @click="OpenClick(item)"
                    :class="IsRegion==item.value?'hover':''"
                    v-if="Number(item.status) != 3"
                >
                    <img :src="item.img_default" alt="" class="default">
                    <img :src="item.img_hover" alt="" class="hover">
                    <span class="expect" v-if="Number(item.status) == 2">
                        <span class="table">
                            <img src="@/assets/expect.png" alt="" class="icon">
                            <p>{{$t('m.expect')}}</p>
                        </span>
                    </span>
                </li>
            </ul>
            <h2>{{$t('m.SelectAccountType')}}</h2>
            <ul class="SelectSecurityUl f-cb">
                <li 
                    v-for="(item,index) in assetType"
                    :key="index"
                    @click="assetTypeClick(item)"
                    :class="radio==item.value?'hover':''"
                    v-if="Number(item.status) != 3"
                >
                    <img :src="item.img_default" alt="" class="default">
                    <img :src="item.img_hover" alt="" class="hover">
                    <span class="expect" v-if="Number(item.status) == 2">
                        <span class="table">
                            <img src="@/assets/expect.png" alt="" class="icon">
                            <p>{{$t('m.expect')}}</p>
                        </span>
                    </span>
                </li>
            </ul>
            <span class="fr next" @click="NextClick">{{$t('m.Next')}}</span>
        </div>
        <account-preparation 
            :show="accountShow" 
            @closeClick="closeClick" 
            :IsRegion="IsRegion" 
            :list="list" 
            @getUserType="getUserType"
        >
        </account-preparation>
    </div>
</template>
<script>
    import AccountPreparation from "@/components/popup/AccountPreparation.vue";
    export default {
        components: {
            AccountPreparation
        },
        data() {
            return{
                accountShow:false,
                IsRegion:1,//1 大陆用户 2 港澳台 3 海外其他用户
                region:[],
                assetType:[],
                radio:2,
                list:[],
            }
        },
        mounted(){
            this.getOpen()
            if(sessionStorage.getItem('IsRegion')){
                this.IsRegion = sessionStorage.getItem('IsRegion')
            }
            if(sessionStorage.getItem('assetType')){
                this.radio = sessionStorage.getItem('assetType')
            }
            window.document.title = this.$t('m.SelectCertificateType')
        },
        computed:{},
        methods:{
            OpenClick(item){
                if(item.status == 1){
                    this.IsRegion = item.value;
                    sessionStorage.setItem('IsRegion',item.value)
                    sessionStorage.setItem('readyList',JSON.stringify(item.readyList))
                    this.list = item.readyList
                }
            },
            //下一步点击
            NextClick(){
                this.accountShow = true;
            },
            assetTypeClick(item){
                if(item.status == 1){
                    this.radio = item.value
                    sessionStorage.setItem('assetType',item.value)
                }
            },
            //关闭弹框
            closeClick(msg){
                this[msg] = false;
            },
            //设置用户开户类型
            getUserType(type){
                var _this = this;
                _this.$axios.post('/open/preSubmit',{
                    userType:type,
                    assetType:this.radio,
                })
                .then(res => {
                    if(res.data.code == 1){
                       sessionStorage.setItem('userType',type);
                       sessionStorage.setItem('assetType',this.radio);
                       sessionStorage.setItem('isModify',0)
                       //判断 open_status 1:未开户，2已经开户(审核成功)，3待审核，4审核未通过，5待完善
                       if([1,5].includes(JSON.parse(sessionStorage.getItem('info')).open_status)){
                            _this.getFlow()
                       }else{
                           _this.$router.push({ path:'/examine'});
                       }
                    }else if(res.data.code == 401){
                         _this.$router.push({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            getFlow(){
                var _this = this;
                _this.$axios.get('/open/page/flow',{params:{
                    userType:sessionStorage.getItem('userType'),
                    isModify:Number(sessionStorage.getItem('isModify')),
                }})
                .then(res => {
                    if(res.data.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data.data))
                        sessionStorage.setItem('isModify',0)
                        
                        if(res.data.data.page_info.type==2){
                            _this.$router.push({ path:'/custom?id='+res.data.data.page_info.id});
                        }else{
                            _this.$router.push({ path:'/'+res.data.data.page_info.url_path});
                        }
                        
                    }else if(res.data.code == 102 || res.data.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.data.code == 104){
                        _this.$router.go(0)
                    }else if(res.data.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            getOpen(){
                var _this = this;
                this.$axios.get('/open/index',{params:{terminal:'pc'}})
                .then(res => {
                    if(res.data.code == 1){
                        this.region = res.data.data.region;
                        this.assetType = res.data.data.assetType;
                        _this.IsRegion= this.region.find(item => Number(item.status) == 1 ).value
                        _this.list = this.region.find(item => Number(item.status) == 1 ).readyList
                        _this.radio = this.assetType.find(item => Number(item.status) == 1 ).value
                        if(sessionStorage.getItem('IsRegion')){
                            _this.IsRegion = sessionStorage.getItem('IsRegion')
                        }
                        if(sessionStorage.getItem('assetType')){
                            _this.radio = sessionStorage.getItem('assetType')
                        }
                        console.log(_this.IsRegion)
                    }else if(res.data.code == 401){
                         _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    _this.$message({
                        message: error,
                        type: "warning",
                        duration:2000,
                    });
                })
            }
        },
        watch:{},
    }
</script>
<style lang="less">
    .SelectSecurityType{
        padding-top: 22px;
        .SelectSecurityList{
            width: 400px;
            margin:0 auto;
            display: block;
            position: relative;
            li{
                text-align: center;
                padding-top:29px;
                position: relative;
                font-size: 14px;
                color: @titleColor;
                float: left;
            }
            li:after{
                content: "";
                width: 12px;
                height: 12px;
                background: @hoverColor;
                border-radius: 50%;
                position: absolute;
                left:50%;
                top:-3px;
                margin-left: -6px;
            }
            li:nth-child(1){
                margin-left: -42px;
            }
            li:nth-child(2){
                
                float: right;
                margin-right: -42px;
            }
            li:nth-child(3){
                width: calc(100% - 260px);
                float: none;
                margin: 0 auto;
            }
        }
        .SelectSecurityList::before{
            content: "";
            width: 100%;
            height: 6px;
            background: @e7e6eb;
            position: absolute;
            top:0;
            left:0;
            border-radius: 3px;
        }
        .SelectSecurityborder{
            width: 460px;
            padding: 30px 0 14px;
            margin: 0 auto;
            h2{
                font-size: 20px;
                font-weight: bold;
                color: @000;
                line-height: 56px;
            }
        }
        .SelectSecurityUl{
            width: 100%;
            li{
                margin-bottom: 20px;
                width: 100%;
                cursor: pointer;
                background: url(~@/assets/img02.png) no-repeat center;
                background-size: 100% 100% !important;
                transition: all 0.3s;
                position: relative;
                img{
                    width: 100%;
                    display: block;
                }
                img.hover{
                    display: none;
                }
                .expect{
                    position: absolute;
                    top:0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background:rgba(247,247,247,.86);
                    text-align: center;
                    display: block;
                    .table{
                        display: table-cell;
                        vertical-align:middle;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                    .icon{
                        width: 58px;
                        margin:0 auto 5px;
                    }
                    p{
                        font-size: 26px;
                        line-height: 46px;
                        color: #404040;
                    }
                }
            }
            li.hover{
                img.hover{
                    display: block;
                }
                img.default{
                    display: none;
                }
            }
        }
        .next{
            background: @hoverColor;
            color: @fff;
            width:100%;
            height: 36px;
            line-height: 36px;
            border-radius:3px;
            display:block;
            text-align: center;
            font-size: 14px;
            transition: opacity 0.3s;
            margin-top: 30px;
            cursor: pointer;
        }
    }
    .English .SelectSecurityType .SelectSecurityList li:nth-child(1){
        margin-left: -82px;
    }
</style>